<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div>
        <div th:insert="common/mainHeader :: main_header"></div>
<!--        <div class="main_header">-->
<!--            <div class="main_logo"><img src="/images/logo.png" width="48px"><span style="color:#0067f4;font-weight: bold;margin-left:10px;">AI+应用设计创新大赛</span></div>-->
<!--            <div class="main_header_right">-->
<!--                <ul>-->
<!--                    <li><a th:href="@{logout}">注销</a></li>-->
<!--                    <li>欢迎您，[[${session.user.name}]]！</li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li class="active">
                        <a th:href="@{/main}">
                            账号信息
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/teamUI}">
                            团队信息
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/uis/updatePwdUI}">
                            修改密码
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>账号信息</p>
                    </div>
                    <div class="right_table">
                        <form class="form-horizontal" id="myForm" method="post">
                            <div class="table_form">
                                <label for="type">赛道</label>
                                <input id="type" disabled type="text" th:value="${session.user.typeName}" >
                            </div>
                            <div class="table_form">
                                <label for="phone">手机号</label>
                                <input id="phone" disabled type="text" th:value="${session.user.phone}" >
                            </div>
                            <div class="table_form">
                                <label for="name">姓名</label>
                                <input id="name" name="name" type="text" th:value="${session.user.name}" >
                            </div>
                            <div class="table_form">
                                <label for="email">邮箱</label>
                                <input id="email" name="email" type="text" th:value="${session.user.email}" >
                            </div>
                            <div class="table_form">
                                <label for="area">所在地区</label>
                                <select id="area" name="area">
                                    <option data-value="0" value="" th:selected="${session.user.area==0}">请选择</option>
                                    <option th:each="ar, arState : ${areas}" data-value="${ar.id}" th:value="${ar.id}" th:selected="${session.user.area==arState.count}" th:text="${ar.name}"></option>
                                </select>
                            </div>
                            <div class="table_form">
                                <label>&nbsp;</label>
                                <input  type="submit" class="btn btn-primary formBtn" value="提交" >
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--====== RULE PART ENDS ======-->

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/modernizr-3.7.1.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/jquery-validate.js"></script>

    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    area: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "请输入姓名"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "邮箱格式不正确"
                    },
                    area: {
                        required: "请选择参赛地区"
                    }
                },
                submitHandler: function(form) {
                    const formData = {
                        name: $('#name').val(),
                        phone: $('#phone').val(),
                        email: $('#email').val(),
                        area: $('#area option:selected').val()
                    };
                    $.ajax({
                        type: 'POST',
                        url: '/users/update',
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                            if(data.message!=null){
                                swal({
                                    text: data.message,
                                    icon: 'error'
                                });
                            }else{
                                swal({
                                    text: "更新个人信息成功",
                                    icon: 'success'
                                });
                                setTimeout(function(){
                                    window.location.reload();
                                }, 1000)
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus);
                        }
                    });
                }
            });
            // $('#registerForm').submit(function(event){
            //     event.preventDefault();
            //     const phone = $('#phone').val();
            //     const name = $('#name').val();
            //     const email = $('#email').val();
            //     const area = $('#area option:selected').data('value');
            //     const password = $('#password').val();
            //     const passwordCopy = $('#passwordCopy').val();
            //     return;
            //
            //     if(phone == ''){
            //         $('#msg').text('手机号不能为空');
            //         return;
            //     }else{
            //
            //     }
            //
            //     const formData = {
            //         phone: phone,
            //         name: name,
            //         email: email,
            //         area: area,
            //         password: password
            //     };
            //     $.ajax({
            //         type: 'POST',
            //         url: '/register',
            //         data: formData,
            //         dataType: 'json',
            //         success: function(data) {
            //             if(data.message!=null){
            //                 swal({
            //                     text: data.message,
            //                     icon: 'error'
            //                 });
            //             }else{
            //                 window.location.href = '/main';
            //                 // 处理返回的数据
            //             }
            //         },
            //         error: function(jqXHR, textStatus, errorThrown) {
            //             console.log('Error: ' + textStatus);
            //         }
            //     });
            // })
        })
    </script>
</body>
</html>
